<template>
  <el-popover
    class="YImgSelect"
    :disabled="disabled"
    v-model="showPopover"
    trigger="click">
    <div class="y-img-reference el-input__inner" slot="reference">
      <span v-if="isNull() && placeholder" style="opacity: 0.5">{{placeholder}}</span>
      <template v-if="multiple">
        <el-tag v-for="(item, index) in value" :key="index" :closable="!disabled" @close="index => closeImg(index)">
          <el-image
            fit="contain"
            @click.stop
            :src="generateMediaUrl({ fileOpenUrl: item[prop['url']] })"
            :preview-src-list="value.map(img => ({ fileOpenUrl: img[prop['url']] }))"></el-image>
        </el-tag>
      </template>
      <template v-else>
        <el-tag v-if="!!value[prop['id']]" :closable="!disabled" @close="closeImg">
          <el-image
            fit="contain"
            @click.stop
            :src="generateMediaUrl({ fileOpenUrl: value[prop['url']] })"
            :preview-src-list="[generateMediaUrl({ fileOpenUrl: value[prop['url']] })]"></el-image>
        </el-tag>
      </template>
    </div>
    <div class="y-img-block">
      <div
        v-for="(item, index) in imgAry"
        class="y-img-item"
        :class="{'y-checked': isChecked(item)}"
        @click="checkedImg(item)"
        :key="index">
        <img :src="generateMediaUrl({ fileOpenUrl: item[prop['url']] })">
      </div>
    </div>
  </el-popover>
</template>

<script>
export default {
  name: "YImgSelect",
  inject: ['generateMediaUrl'],
  props:{
    value: {
      type: Boolean | Object,
      required: true
    },
    disabled:{
      type: Boolean,
      default: false
    },
    placeholder: String,
    multiple:{
      type: Boolean,
      default: false
    },
    businessType: {
      type: String,
      required: true
    },
    prop:{
      type: Object,
      default: () => ({
        id: 'id',
        url: 'url'
      })
    }
  },
  computed:{
    imgAry(){
      return this.imgList.map(item => ({
        [this.prop['id']]: item.picId,
        [this.prop['url']]: item.picUrl
      }));
    },
  },
  data(){
    return{
      showPopover: false,
      imgList: [],
      checkedAry: []
    }
  },
  methods:{
    //放在computed里视图不更新，我也不知道为什么
    isNull(){
      return this.multiple ? !this.value.length : !this.value[this.prop['id']];
    },
    checkedImg(item){
      if(this.multiple){
        let objIndex = this.value.findIndex(v => v[this.prop['id']] === item[this.prop['id']]);
        if(objIndex < 0){
          this.value.push({
            [this.prop['id']]: item[this.prop['id']],
            [this.prop['url']]: item[this.prop['url']],
          });
        }else{
          this.value.splice(objIndex, 1);
        }
        this.$emit('change', this.value);
      }else{
        if(this.value[this.prop['id']] !== item[this.prop['id']]){
          this.$set(this.value, this.prop['id'], item[this.prop['id']]);
          this.$set(this.value, this.prop['url'], item[this.prop['url']]);
          this.$emit('change', this.value);
          this.showPopover = false;
        }
      }
      this.$nextTick(() => {
        this.$forceUpdate();
      });
    },
    isChecked(img){
      if(this.multiple) {
        return !!this.value.find(item => item[this.prop['id']] === img[this.prop['id']]);
      }else{
        return this.value[this.prop['id']] === img[this.prop['id']];
      }
    },
    closeImg(index){
      if(this.multiple){
        this.value.splice(index, 1);
      }else{
        this.$set(this.value, this.prop['id'], '');
        this.$set(this.value, this.prop['url'], '');
      }
      this.$emit('change', this.value);
      this.$nextTick(() => {
        this.$forceUpdate();
      });
    }
  },
  watch:{
    'businessType':{
      handler(val){
        if(val){
          this.$yAxios({
            url: this.$api.system.systemPictureList,
            data:{
              businessType: this.businessType
            }
          }, info => {
            this.$set(this, 'imgList', info);
          })
        }
      },
      immediate: true
    }
  }
}
</script>

<style scoped lang="less">
@basic-img-select-color: #1890ff;
.YImgSelect{
  .y-img-reference{
    display: inline-block;
    width: auto;
    min-width: 217px;
    height: auto;
    min-height: 40px;
    .el-tag{
      height: auto;
      /deep/ img{
        max-height: 100px;
        max-width: 100px;
      }
      /deep/ .el-tag__close{
        vertical-align: top;
        top: 4px;
      }
    }
  }
}
.y-img-block{
  display: flex;
  flex-wrap: wrap;
  max-width: 586px;
  max-height: 356px;
  overflow-y: auto;
  padding: 10px;
  >.y-img-item{
    height: 102px;
    width: 102px;
    border: @common-border;
    cursor: pointer;
    margin: 5px;
    &.y-checked{
      box-shadow: 0 0 4px 4px @basic-img-select-color;
      border: none;
    }
    >img{
      max-height: 100px;
      max-width: 100px;
      /*position: relative;
      z-index: 1;*/
    }
  }
}
</style>